<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>会说话的时光</title>
		<!-- meta -->
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="时光  说话" />
		<meta name="description" content="会说话的时光"/>
		<link rel="stylesheet" href="${base}/css/bootstrap.min.css">
		<%-- <link rel="stylesheet" href="${base}/css/ionicons.min.css"> --%>
		<link rel="stylesheet" href="${base}/css/pace.css">
	    <link rel="stylesheet" href="${base}/css/custom.css">
	    <link rel="stylesheet" href="${base}/css/gh-buttons.css">

	    <script src="${base}/js/jquery-2.1.3.min.js"></script>
	    <script src="${base}/js/bootstrap.min.js"></script>
	    <script src="${base}/js/pace.min.js"></script>
	    <script src="${base}/js/modernizr.custom.js"></script>
	    <script src="${base}/js/script.js"></script>
<style>
	.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
	}
	.white_content {
	display: none;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border: 16px solid lightblue;
	background-color: white;
	z-index:1002;
	overflow: auto;
	}
	.white_content_small {
	display: none;
	position: absolute;
	top: 20%;
	left: 30%;
	width: 40%;
	height: 50%;
	border: 16px solid lightblue;
	background-color: white;
	z-index:1002;
	overflow: auto;
	}
	
	
*{margin:0;padding:0;list-style:none;border:none;}
body{font:normal 12px/normal '宋体';}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
/*星期更新*/
.weeks{ width:800px; height:350px;margin:100px auto;border:1px solid #555;}
.weekItem{width:800px;height:30px;border-bottom:2px solid #444;}
.weekItem li{float:left;height:30px;width:71px;line-height:30px;text-align:center;cursor:pointer;overflow:hidden;}
.weekItem li.on{background:#444;color:#fff;width:74px;}
.weekItem li.hover{background:#555;color:#fff;}
.box01_c{width:800px;height:308px; padding:10px 0 0px 0;position:relative;overflow:auto;}
.box01_c dl{padding:0 10px 10px 25px;line-height:26px;height:308px;}
.box01_c dl dt{color:#999;line-height:1;padding-bottom:10px;}
.box01_c dl dd{height:26px;overflow:hidden;}
.box01_c dl dd a{color:#282828;}
.box01_c dl dd span{float:right;color:#999;}
.box01_c dl dd span.today{color:#f60;}


/* 表格样式*/
table tr:first-child{background:#0066CC; color:#fff;font-weight:bold;} /*第一行标题蓝色背景*/
table{border-top:1pt solid #C1DAD7;border-left:1pt solid #C1DAD7;margin: 0 auto;} 
td{ padding:5px 10px; text-align:center;border-right:1pt solid #C1DAD7;border-bottom:1pt solid #C1DAD7;}
tr:nth-of-type(odd){ background:#F5FAFA;} /* odd 标识奇数行，even标识偶数行 */
tr:hover{ background: #E0F0F0;} /*鼠标悬停后表格背景颜色*/

</style>
	    
	    
	    
	</head>

	<body>
		<%@ include file="menu.jsp" %>
		
		

		<div class="content-body">
			<div class="container">
				<div class="row">
				<div >
						<div id="search-form1" class="search-form1">
							<form role="search1" method="get" id="searchform1" >
								<input type="search" placeholder="搜索" id="searchcontent">
								<button type="submit" class="button" id="searchbtn"><span>搜索</span></button>
							</form>				
						</div>
				</div>
				<main class="col-md-12">
					<%-- <c:forEach items="${list }" var="obj" varStatus="status">
						
					</c:forEach> --%>
					<!-- 代码部分begin -->
<div class="weeks">
  <ul class="weekItem" id="weektab">
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    <li>周四</li>
    <li>周五</li>
    <li>周六</li>
    <li>周日</li>
  </ul>
  <div class="box01_c" id="weekcon">
    <div style="position:relative;">
      <dl>
        <dt>今日消费</dt>
		<table width='700'  border='0' cellspacing='0' cellpadding='0' align='center'>
  <tr>
  	<td>行号</td>
    <td>项目</td>
    <td>类型</td>
    <td>金额</td>
    <td>是否必须</td>
    <td>消费所占比例</td>
    <td>操作</td>
  </tr>
  <c:forEach items="${arrList[1] }" var="obj" varStatus="status">
		  <tr>
		  	<td>${status.count}</td>
		    <td>${obj.name}</td>
		    <c:if test="${obj.type == '0' }">
		    	<td>收入</td>
		    </c:if>
		     <c:if test="${obj.type == '1' }">
		    	<td>支出</td>
		    </c:if>
		    <td>${obj.money}</td>
		      <c:if test="${obj.isNeed == '0' }">
		    	<td>非必须</td>
		    </c:if>
		     <c:if test="${obj.isNeed == '1' }">
		    	<td>必须</td>
		    </c:if>
		    <td>0.1</td>
		    <td>
		   		<a href="javascript:edit(${obj.id});" class="button big" ><span>编辑</span></a>
			    <a href="javascript:add('0');" class="button big" ><span>添加</span></a>
		    </td>
		  </tr>
	</c:forEach>
</table>
      </dl>
      <dl>
        <dt>周二</dt>
        		<table width='700'  border='0' cellspacing='0' cellpadding='0' align='center'>
  <tr>
  	<td>行号</td>
    <td>项目</td>
    <td>类型</td>
    <td>金额</td>
    <td>是否必须</td>
    <td>消费所占比例</td>
    <td>操作</td>
  </tr>
  <c:forEach items="${arrList[2] }" var="obj" varStatus="status">
		  <tr>
		  	<td>${status.count}</td>
		    <td>${obj.name}</td>
		    <c:if test="${obj.type == '0' }">
		    	<td>收入</td>
		    </c:if>
		     <c:if test="${obj.type == '1' }">
		    	<td>支出</td>
		    </c:if>
		    <td>${obj.money}</td>
		      <c:if test="${obj.isNeed == '0' }">
		    	<td>非必须</td>
		    </c:if>
		     <c:if test="${obj.isNeed == '1' }">
		    	<td>必须</td>
		    </c:if>
		    <td>0.1</td>
		    <td>
		    	<a href="javascript:edit(${obj.id});" class="button big" ><span>编辑</span></a>
			    <a href="javascript:add('0');" class="button big" ><span>添加</span></a>
		    </td>
		  </tr>
	</c:forEach>
</table>
      </dl>
      <dl>
        <dt>周三</dt>
        	<table width='700' border='0' cellspacing='0' cellpadding='0' align='center'>
  <tr>
  	<td>行号</td>
    <td>项目</td>
    <td>类型</td>
    <td>金额</td>
    <td>是否必须</td>
    <td>消费所占比例</td>
    <td>操作</td>
  </tr>
  <c:forEach items="${arrList[3] }" var="obj" varStatus="status">
		  <tr>
		  	<td>${status.count}</td>
		    <td>${obj.name}</td>
		    <c:if test="${obj.type == '0' }">
		    	<td>收入</td>
		    </c:if>
		     <c:if test="${obj.type == '1' }">
		    	<td>支出</td>
		    </c:if>
		    <td>${obj.money}</td>
		      <c:if test="${obj.isNeed == '0' }">
		    	<td>非必须</td>
		    </c:if>
		     <c:if test="${obj.isNeed == '1' }">
		    	<td>必须</td>
		    </c:if>
		    <td>0.1</td>
		    <td>
		    	<a href="javascript:edit(${obj.id});" class="button big" ><span>编辑</span></a>
			    <a href="javascript:add('0');" class="button big" ><span>添加</span></a>
		    </td>
		  </tr>
	</c:forEach>
</table>
      </dl>
      <dl>
        <dt>周四</dt>
        	<table width='700'  border='0' cellspacing='0' cellpadding='0' align='center'>
  <tr>
  	<td>行号</td>
    <td>项目</td>
    <td>类型</td>
    <td>金额</td>
    <td>是否必须</td>
    <td>消费所占比例</td>
    <td>操作</td>
  </tr>
  <c:forEach items="${arrList[4] }" var="obj" varStatus="status">
		  <tr>
		  	<td>${status.count}</td>
		    <td>${obj.name}</td>
		    <c:if test="${obj.type == '0' }">
		    	<td>收入</td>
		    </c:if>
		     <c:if test="${obj.type == '1' }">
		    	<td>支出</td>
		    </c:if>
		    <td>${obj.money}</td>
		      <c:if test="${obj.isNeed == '0' }">
		    	<td>非必须</td>
		    </c:if>
		     <c:if test="${obj.isNeed == '1' }">
		    	<td>必须</td>
		    </c:if>
		    <td>0.1</td>
		    <td>
		    	<a href="javascript:edit(${obj.id});" class="button big" ><span>编辑</span></a>
			    <a href="javascript:add('0');" class="button big" ><span>添加</span></a>
		    </td>
		  </tr>
	</c:forEach>
</table>
      </dl>
      <dl>
        <dt>周五</dt>
        	<table width='700'  border='0' cellspacing='0' cellpadding='0' align='center'>
  <tr>
  	<td>行号</td>
    <td>项目</td>
    <td>类型</td>
    <td>金额</td>
    <td>是否必须</td>
    <td>消费所占比例</td>
    <td>操作</td>
  </tr>
  <c:forEach items="${arrList[5] }" var="obj" varStatus="status">
		  <tr>
		  	<td>${status.count}</td>
		    <td>${obj.name}</td>
		    <c:if test="${obj.type == '0' }">
		    	<td>收入</td>
		    </c:if>
		     <c:if test="${obj.type == '1' }">
		    	<td>支出</td>
		    </c:if>
		    <td>${obj.money}</td>
		      <c:if test="${obj.isNeed == '0' }">
		    	<td>非必须</td>
		    </c:if>
		     <c:if test="${obj.isNeed == '1' }">
		    	<td>必须</td>
		    </c:if>
		    <td>0.1</td>
		    <td>
		    	<a href="javascript:edit(${obj.id});" class="button big" ><span>编辑</span></a>
			    <a href="javascript:add('0');" class="button big" ><span>添加</span></a>
		    </td>
		  </tr>
	</c:forEach>
</table>
      </dl>
      <dl>
        <dt>周六</dt>
        	<table width='700'  border='0' cellspacing='0' cellpadding='0' align='center'>
  <tr>
  	<td>行号</td>
    <td>项目</td>
    <td>类型</td>
    <td>金额</td>
    <td>是否必须</td>
    <td>消费所占比例</td>
    <td>操作</td>
  </tr>
  <c:forEach items="${arrList[6] }" var="obj" varStatus="status">
		  <tr>
		  	<td>${status.count}</td>
		    <td>${obj.name}</td>
		    <c:if test="${obj.type == '0' }">
		    	<td>收入</td>
		    </c:if>
		     <c:if test="${obj.type == '1' }">
		    	<td>支出</td>
		    </c:if>
		    <td>${obj.money}</td>
		      <c:if test="${obj.isNeed == '0' }">
		    	<td>非必须</td>
		    </c:if>
		     <c:if test="${obj.isNeed == '1' }">
		    	<td>必须</td>
		    </c:if>
		    <td>0.1</td>
		    <td>
		    <a href="javascript:edit(${obj.id});" class="button big" ><span>编辑</span></a>
			<a href="javascript:add('0');" class="button big" ><span>添加</span></a>
		    </td>
		  </tr>
	</c:forEach>
</table>
      </dl>
      <dl>
        <dt>周日</dt>
        	<table width='700'  border='0' cellspacing='0' cellpadding='0' align='center'>
  <tr>
  	<td>行号</td>
    <td>项目</td>
    <td>类型</td>
    <td>金额</td>
    <td>是否必须</td>
    <td>消费所占比例</td>
    <td>操作</td>
  </tr>
  <c:forEach items="${arrList[0] }" var="obj" varStatus="status">
		  <tr>
		  	<td>${status.count}</td>
		    <td>${obj.name}</td>
		    <c:if test="${obj.type == '0' }">
		    	<td>收入</td>
		    </c:if>
		     <c:if test="${obj.type == '1' }">
		    	<td>支出</td>
		    </c:if>
		    <td>${obj.money}</td>
		      <c:if test="${obj.isNeed == '0' }">
		    	<td>非必须</td>
		    </c:if>
		     <c:if test="${obj.isNeed == '1' }">
		    	<td>必须</td>
		    </c:if>
		    <td>0.1</td>
		    <td>
			    <a href="javascript:edit(${obj.id});" class="button big" ><span>编辑</span></a>
			    <a href="javascript:add('0');" class="button big" ><span>添加</span></a>
		    </td>
		  </tr>
	</c:forEach>
</table>
      </dl>
    </div>
  </div>
</div>
				</main>
				
				</div>
			</div>
		</div>
		<!--弹出层时背景层DIV-->
		<div id="back" class="black_overlay">
		</div>
		<div id="mydiv" class="white_content">
		<div style="text-align: right; cursor: default; height: 40px;">
		<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
			项目名称： <input type="text" name="name"/>
			项目类型： <select name="type">
						<option value="0">收入</option>
						<option value="1">支出</option>
					</select>
			金&nbsp;额：<input type="text" name="money"/>
			是否必须：<select name="isNeed">
						<option value="0">非必须</option>
						<option value="1">必须</option>
					</select>
		</div>
		</div>
		
		<%@ include file="foot.jsp" %>

		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close"><span class="ion-ios-close-empty"></span></button>
			<nav>
				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a href="full-width.html">文章</a></li>
					<li><a href="about.html">我</a></li>
					<li><a href="contact.html">联系me</a></li>
				</ul>
			</nav>
		</div>
	</body>
	
<script type="text/javascript">
	function week_init(){
		$("#weektab li").each(function(i){
			$(this).click(function(){week_click(i);}).hover(function(){$(this).addClass('hover');},function(event){$(this).removeClass('hover');});
		});
		var w = new Date().getDay();
		if (w==0){ w=6;} else {w=w-1;}
		week_click(w);
		$("#weekcon dl:last").css({"padding-bottom":"0","margin-bottom":"10px"});
	}
	function week_click(num){
		$("#weektab li").removeClass('on').eq(num).addClass('on');
		$curdl=$("#weekcon dl").eq(num);
		$("#weekcon dl").each(function(){
		console.log($(this).index()+"----"+num);
			if($(this).index()==num){
				$(this).show();
			}else{
				$(this).hide();
			}
		});
		//刷新数据
		//reflashData(num);
		 var posi=$curdl.position();
		$("#weekcon").animate({scrollTop:posi.top},200);
	}
/* 	function reflashData(num){
		$.ajax({
		    url:'${base}/prorecord/getListByWeekDay',
			cache: false,
            type: "POST",
            data:{weekDay:num},// 你的formid
            async: false,
            error: function(request) {
                alert("Connection error");
            },
            success: function(data) {
               alert(data);
            }
		})
	} */
	$(function(){
		week_init();
	});
	
	/** 编辑*/
	function edit(id){
		if(id=='undefine'){
			alert("参数为空");
			return;
		}
		$.ajax({
		    url:'${base}/prorecord/getListByWeekDay',
			cache: false,
            type: "POST",
            data:{weekDay:num},// 你的formid
            async: true,
            error: function(request) {
                alert("Connection error");
            },
            success: function(data) {
               alert(data);
            }
		})
	}
	
	
	/** add*/
	function edit(id){
		if(id=='undefine'){
			alert("参数为空");
			return;
		}
		$.ajax({
		    url:'${base}/prorecord/getListByWeekDay',
			cache: false,
            type: "POST",
            data:{weekDay:num},// 你的formid
            async: true,
            error: function(request) {
                alert("Connection error");
            },
            success: function(data) {
               alert(data);
            }
		})
	}
	
	
	$(".continuebtn").click(function(){
	    console.log($(this).parent().parent().find(".content").html());
		var show_div ="mydiv";
		var bg_div = "back";
		$("#mydiv").css("display","block");
		$("#back").css("display","block");
		$("#back").css("width",document.body.scrollWidth);
		$("#"+show_div).append($(this).parent().parent().find(".content").html());
		$("#"+bg_div).height($(document).height());	
		
	});
	
	//关闭弹出层
	function CloseDiv(show_div,bg_div)
	{
		$("#MyDiv").css("display","none");
		$("#fade").css("display","none");
	};
</script>

</html>